<template>
    <div class="page" v-on:scroll="handleScroll">
        <TopBanner/>
        <TopBar
            @click-left="onClickLeft"
            :background="topBarBackground"
        />
        <div v-if="hideCatTab" class="bg-white top-cat-bar">
            <CatTab :items="treasureCategory" v-model="activeIndex" class="category-tab" @change="handleCatTab"/>
        </div>
        <div class="fp-info">
            <van-swipe class="swipe" :show-indicators="swipeAttr.showIndicator">
                <van-swipe-item v-for="(item,k) in prizeInfo" v-bind:key="k">
                    <div class="swiper-item">
                        恭喜**{{item}}签到获得2张福屏券
                    </div>
                </van-swipe-item>
            </van-swipe>
            <div class="help">
                <van-image :src="img[1]" class="d-block-pk" @click="toHelp"/>
            </div>
        </div>
        <div class="my-treasure">
            <div class="wrap">
                <span>我的福屏卷：</span>
                <span class="digit">{{treasureInfo.fpCouponNum}}</span>
                <span>张</span>
            </div>
        </div>
        <div class="d-flex-pk  align-items-end h2">
            <div class="font-bold font-size-18-pk page-pad-pk">
                最新开奖
            </div>
            <van-icon
                name="notes-o"
                @click="showCalendar = true"
                size="20"
                color="FF5300"
            />
            <div class="text-"> 清除日期</div>
        </div>
        <CatTab :items="treasureCategory" v-model="activeIndex" class="category-tab" @change="handleCatTab"/>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            class="page-pad-pk"
        >
            <div class="d-flex-pk justify-content-between bg-white goods-list" v-for="(item,key) in treasureGoodsList"
                 v-bind:key="key" @click="toDetail(item)">
                <img :src="item.goodsThumb" class="thumb"/>
                <div class="right">
                    <div class="title ellipsis-2-pk">{{item.goodsName}}</div>
                    <div class="progress font-size-11-pk">
                        <span>满</span>
                        <span>{{item.awardCouponNum}}</span>
                        <span>张券即可,开奖进度</span>
                        <span>{{progressControl(item.nowCouponNum,item.awardCouponNum)}}%</span>
                    </div>
                    <van-progress pivot-text="" color="#FF5300"
                                  :percentage="progressControl(item.nowCouponNum,item.awardCouponNum)"/>
                    <div class="footer">
                        <Price :value="item.originalPrice" :prefixStyle="prefixStyle"/>
                        <div class="btn text-white">参与夺宝</div>
                    </div>
                </div>
            </div>
        </van-list>
        <van-calendar v-model="showCalendar" @confirm="getDate"/>
        <NavBar :active="navTabActive"/>
    </div>
</template>

<script>
    import TopBar from "./topBar"
    import NavBar from "./NavTab";
    import CatTab from "./CatTab";
    import {Progress} from 'vant';
    import TopBanner from "./TopBanner"
    import Price from "./Price";
    import {Calendar} from 'vant';

    export default {
        components: {
            TopBar,
            CatTab,
            [Progress.name]: Progress,
            NavBar,
            TopBanner,
            Price,
            [Calendar.name]: Calendar,
        },
        data() {
            return {
                navTabActive: 1,
                img: [
                    require("@img/treasureTop.png"),
                    require("@img/help.png"),
                ],
                signBtn: [
                    require("@img/singBgNo.png"),
                    require("@img/singBgYes.png")
                ],
                prizeInfo: [],
                topBarBackground: "transparent",
                showCalendar: false,
                awardDate: "",
                hideCatTab: false,
                treasureInfo: {},
                swipeAttr: {
                    showIndicator: false,
                },
                tabsAttr: {
                    background: "transparent"
                },
                treasureCategory: [],
                activeIndex: 1,
                treasureGoodsCategoryId: 0,
                loading: true,
                finished: true,
                page: this.$global.page,
                pages: this.$global.page,
                size: this.$global.size,
                treasureGoodsList: [],
                prefixStyle: {
                    color: '#FF5300',
                    fontSize: '16px',
                    fontWeight: "bold"
                }
            }
        },
        created() {
            this.getTreasureInfo();
            this.getTreasureCategory();
            this.getPrizeInfo(2);
            window.addEventListener('scroll', () => {
                let scrollTop = document.documentElement.scrollTop ||
                    document.body.scrollTop;
                if (scrollTop > 550) {
                    this.hideCatTab = true;
                } else {
                    this.hideCatTab = false;
                }
            }, true);
        },
        methods: {
            getPrizeInfo(lenght) {
                let len = lenght || 8;
                let $chars = '青丝依琯此情可待成时光荒凉追忆旧知己怦然心动你若安好，便是晴天十里平湖霜满天长欢.*23456789';
                let maxPos = $chars.length;
                let str = '';

                for (let n = 0; n < 10; n++) {
                    str = '';
                    for (let i = 0; i < len; i++) {
                        str += $chars.charAt(Math.floor(Math.random() * maxPos));
                    }
                    this.prizeInfo.push(str);
                }
            },
            getDate() {
                this.showCalendar = false;
            },
            /**
             * 获取夺宝首页详情
             * @variation treasureInfo 数据
             */
            async getTreasureInfo() {
                await this.$api.getTreasureInfo({}).then(res => {
                    if (res.data.code === "E000001") {
                        return false;
                    }
                    this.treasureInfo = res.data.data;
                    if (this.treasureInfo.isSign === '1') {
                        this.isSign = true;
                    }
                    localStorage.setItem("treasureInfo", JSON.stringify(res.data.data));
                });
            },
            async getTreasureCategory() {
                await this.$api.getTreasureCategory({
                    type: 1
                }).then((res) => {
                    this.treasureCategory = res.data.data;
                    this.treasureGoodsCategoryId = res.data.data[this.activeIndex].treasureGoodsCategoryId;
                    this.loading = false;
                    this.finished = false;
                });
            },
            getNewTreasureGoodsList: function () {
                this.$api.getNewTreasureGoodsList({
                    "awardDate": this.awardDate,
                    "page": this.page++,
                    "size": this.size,
                    "treasureGoodsCategoryId": this.treasureGoodsCategoryId,
                }).then((res) => {
                    this.pages = res.data.data.pages;
                    if (this.page >= this.pages || res.data.data === null) {
                        this.finished = true;
                    }
                    this.treasureGoodsList = this.treasureGoodsList.concat(res.data.data.list);
                    this.loading = false;
                });
            },
            onLoad() {
                this.getTreasureGoodsList();
            },
            /**
             * 百分比显示条
             * @param val 要计算的阶梯（百分比）
             * @param max 总量
             */
            progressControl: function (val, max) {
                let v = parseInt(val);
                let m = parseInt(max)
                if (val === 0) {
                    return 0;
                } else {
                    let press = Math.floor((v / m) * 100);
                    if (press > 100) {
                        press = 100;
                    }
                    return press;
                }
            },
            handleCatTab(index) {
                this.activeIndex = index;
                this.treasureGoodsCategoryId = this.treasureCategory[index].treasureGoodsCategoryId;
                this.page = 0;
                this.treasureGoodsList = [];
                this.getTreasureGoodsList();
            },
            toDetail(item) {
                this.$router.push({
                    path: "./Detail",
                    query: {
                        id: item.activityGoodsId,
                        url: "./new"
                    }
                });
            },
            handleScroll(e) {
                if (e.target.documentElement.scrollTop > 550) {
                    this.topBarBackground = "#FF5300";
                } else {
                    this.topBarBackground = "transparent";
                }
            },
            onClickLeft() {
                this.$router.push({
                    path: "../index",
                });
            },
            toHelp() {
                this.$router.push({
                    path: "./help",
                    query: {
                        "url": "./index"
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "treasure";

    .h2 {
        margin-top:    40px;
        margin-bottom: 15px;
    }

    .top-cat-bar {
        position:    fixed;
        top:         48px;
        z-index:     9;
        padding-top: 10px;
    }

    .my-treasure {
        position:   relative;
        margin-top: 27vh;
        text-align: center;

        .wrap {
            display:        inline-block;
            background:     linear-gradient(0deg, #f5f5f5, #ffffff);
            border-radius:  50rem;
            padding:        4px 16px;
            color:          $orange;
            font-weight:    bold;
            letter-spacing: 1px;
            font-size:      15px;

            .digit {
                color: $danger;
            }
        }
    }

    .fp-info {
        position:        absolute;
        top:             52px;
        display:         flex;
        justify-content: space-between;
        z-index:         1;
        width:           100%;

        .swipe {
            flex:          0 0 60%;
            background:    #2121217d;
            border-radius: 50rem;
            padding:       5px 20px;
            color:         #F5F5F5;
            font-size:     12px;
            margin-left:   15px;
            align-self:    flex-start;
        }

        .help {
            width: 60px;
        }
    }

    .my-sign {
        display:         flex;
        background:      $white;
        position:        relative;
        margin:          15px;
        padding:         8px;
        border-radius:   8px;
        justify-content: space-between;
        align-items:     center;
        box-shadow:      0px 1px 12px 0px #FFCCBC;

        .left {
            flex: 0 0 70vw;

            .had-sign {
                margin-top:     15px;
                color:          $gray-600;
                letter-spacing: 1px;
            }

            .tomorrow-sign {
                color: $gray-600;

                .text {
                    font-size:   22px;
                    color:       $orange;
                    font-weight: 600;
                    margin:      0 5px;
                }
            }
        }

        .right {
            .circle {
                padding: 15px 0;
                width:   50px;
                height:  50px;

                img {
                    width: 100%;
                }
            }
        }
    }

    .reward-wrap {
        display: flex;
        padding: 0 15px;

        .van-swipe {
            width:       80vw;
            height:      5vw;
            margin-left: 5px;

            .van-swipe-item {
                color: $orange;
            }
        }
    }

    .ad {
        display:         flex;
        justify-content: space-between;
        margin-top:      15px;

        .box {
            text-align:    center;
            width:         39vw;
            background:    #FDE9DB;
            padding:       8px 12px;
            font-size:     12px;
            color:         #8F3002;
            line-height:   2.0;
            border-radius: 8px;

            .btn {
                height:      36px;
                width:       116px;
                margin:      0 auto;
                color:       $white;
                font-weight: 500;
                font-size:   16px;
                line-height: 36px;
                padding:     0;
            }

            .btn-1 {
                background-image:  url("~@img/btnToBuy.png");
                background-origin: border-box;
                background-repeat: no-repeat;
                background-size:   100%;
            }

            .btn-2 {
                background:        url("~@img/btnToInvite.png") no-repeat;
                background-origin: border-box;
                background-size:   100%;

            }
        }
    }

    .h1 {
        font-weight: bold;
        padding:     15px;
    }

    .category-tab {
        margin-bottom: 15px;
    }

    .goods-list {
        margin-bottom: 15px;

        .thumb {
            width:   40vw;
            height:  40vw;
            flex:    0 0 40vw;
            display: block;
        }

        .right {
            flex:            1;
            margin:          10px;
            display:         flex;
            flex-direction:  column;
            justify-content: space-between;

            .title {
                font-weight:   600;
                margin-bottom: 8px;
            }

            .progress {
                color: $gray-600;
            }

            .footer {
                display:         flex;
                justify-content: space-between;
                align-items:     center;

                .price {
                    color: $orange;

                    .num {
                        font-size: 16px;
                    }
                }

                .btn {
                    background:    linear-gradient(-62deg, rgba(255, 78, 0, 1) 0%, rgba(252, 128, 42, 1) 100%);
                    border-radius: 30px;
                    color:         $white;
                }
            }
        }
    }


</style>
